<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>待办事件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>添加待办事件:</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="search" name="a1" id="a1" class="form-control input-lg" placeholder="请输入"/>
        </div>
        <div class="col-md-4">
            <button id="a2" class="btn btn-lg bg-info">添加</button>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4">
            <ul class="list-group" id="a3">

            </ul>
        </div>
    </div>
</div>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
    //获取代办事件
    function f1() {
        $.get("thing/getAllThing",function (data) {
            $.each(data,function(i,item){
                $("#a3").append("<div id="+item.id+"><li class='list-group-item'>"+item.text+
                    "<button onclick=deleteit('"+item.id+"') class='badge'>delete</button></li></div>");
            });
        });
    }
    //初始化加载信息
    $(document).ready(f1());
    //添加
    $("#a2").click(function () {
        var val = $("#a1").val();
        $.get("thing/addThing",{text:val},function (data) {
            $("#a3").children().remove();//清空
            f1();//更新
        });
    });
    //删除
    function deleteit(id){
        $.get("thing/deleteThing",{id:id},function (data) {
            $("#a3").children().remove();//清空
            f1();//更新
        });
    }
</script>
</body>
</html>